<template>
  <a-list
    item-layout="vertical"
    :grid="{ gutter: 16, md: 4 }"
    size="large"
    :pagination="pagination"
    :data-source="listData"
  >
    <a-list-item slot="renderItem" key="item['序号']" slot-scope="item">
      <a-card hoverable>
        <img slot="cover" alt="example" :src="item['封面']" />
        <h2>
          <a :href="item['地址']">{{ item['标题'] }}</a>
        </h2>
        <p>
          <a-tag color="cyan">{{ item['类别']}}</a-tag>
          <a-tag color="blue">{{ item['单位']}}</a-tag>
        </p>
      </a-card>
    </a-list-item>
  </a-list>
</template>
<script>
import * as d3 from "d3-fetch";

const listData = [];

export default {
  data() {
    return {
      listData,
      pagination: {
        pageSize: 8
      }
    };
  },
  created: function() {
    this.getList();
  },
  methods: {
    getList: function() {
      // 获取实例引用
      var that = this;
      // 使用d3-fetch包直接读取csv文件
      d3.csv("data.csv").then(function(data) {
        that.listData = data;
      });
    }
  }
};
</script>
<style>
.ant-card-cover img {
  height: 250px;
  object-fit: cover;
}
</style>
